@charset "utf-8";
@import "reset";
@import "common";

.gedan{
    .baba{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        width: 100%;
        height: 274px;
        overflow: hidden;
        color: #fff;
        background: #fff;
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.994155, 0, 1);
        .top{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 4;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            background: rgba(0,0,0,.5);
            .top_bar{
                display: -webkit-box;
                -webkit-box-align: center;
                height: 48px;
                padding: 0 16px 0 14px;
                color: #fff;
                position: relative;
                background: rgba(0,0,0,.2);
                >img{
                    display: block;
                    width: 36px;
                    margin-right: 3px;
                }
                .top_bar__bd{
                    -webkit-box-flex: 1; 
                    >h6{
                        line-height: 1.3;
                        font-size: 14px;
                    }
                    >p{
                        font-size: 10px;
                    }
                }
                >a{
                     height:24px;
                     padding:0 12px;
                     line-height:initial;
                     font-size:15px;
                     color:#fff;
                     border:1px solid #FFFFFF;
                     border-radius:30px;
                     position:absolute;
                     right:15px;                 
                     top:50%;
                     transform:translateY(-50%);
                }
            }
            .album{
                display:flex;
                align-items:center;
    //          -webkit-box-pack: center;
                width: 100%;
                margin-top: 17px;
                padding-left:16px;
                padding-right: 16px;
                overflow: hidden;
                .album__media {
                    position: relative;
                    width: 125px;
                    margin-right: 10px;
                    overflow: hidden;
                    >img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                .album__bd {
                    position: relative;
                    -webkit-box-flex: 1;
                    color: #fff;
                    height: 75px;
                    
                    >h1{
                        -webkit-line-clamp: 2;
                        max-height: 47px;
                        line-height: 1.3;
                        overflow: hidden;
                        font-size: 18px;
                        
                    }
                    >p{
                        font-size: 12px;
                        max-height: 36px;
                        overflow: hidden;
                        margin-top: 8px;
                    }
                }
            }
            .opt_box {
                display: -webkit-box;
                -webkit-box-pack: center;
                -webkit-box-align: center;
                height: 84px;
                padding: 0 16px;
                -webkit-transition: 1s ease-in-out;
                >a{
                    display: -webkit-box;
                    -webkit-box-pack: center;
                    -webkit-box-align: center;
                    width: 170px;
                    height: 40px;
                    overflow: hidden;
                    text-align: center;
                    font-size: 16px;
                    color: #fff;
                    border-radius: 20px;
                    background: #31c27c;
                    &::before{
                        content: "";
                        display: block;
                        height: 0;
                        width: 0;
                        margin-right: -3px;
                        border-color: transparent transparent transparent #fff;
                        border-width: 7px 11px;
                        border-style: solid;
                        border-radius: 2px;
                    }
                }
                .play_bar {
                    display: none;
                    -webkit-box-align: center;
                    width: 100%;
                    .for {
                        color: #777;
                        .play_bar__aside {
                            position: relative;
                            margin-right: 8px;
                            .play_bar__icon {
                                display: block;
                                width: 46px;
                                height: 46px;
                                color: #31c27c;
                                .xxx{
                                    fill: #31C27C;
                                }
                            }
                            .progress {
                                position: absolute;
                                top: 0;
                                left: 0;
                                z-index: 2;
                                width: 46px;
                                height: 46px;
                                -webkit-transform: rotate(-90deg);
                                    .progress__circle {
                                        fill: none;
                                        stroke: #31c27c;
                                        stroke-width: 2;
                                    }

                            }
                        }
                    }
                    .play_bar__bd {
                        -webkit-box-flex: 1;
                        height: 46px;
                        overflow: hidden;
                        >h2{
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            font-size: 14px;
                            line-height: 24px;
                            color: #fff;
                        }
                    }
                    .download {
                        display: block;
                        padding: 10px;
                        margin-right: -10px;
                        .download__icon {
                            display: block;
                            width: 26px;
                            height: 26px;
                            color: #31c27c;
                            stroke-width: 0;
                            stroke: currentColor;
                            fill: currentColor;
                        }
                    }
                }
            }
            
        }
        >img{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 3;
            width: 100%;
            height: 100%;
            object-fit: cover;
            -webkit-transform: scale(1.1) translateZ(0);
            -webkit-filter: blur(36px);
        }
    }
    .count_box {
        position: absolute;
        top: 275px;
        display: -webkit-box;
        -webkit-box-align: center;
        height: 54px;
        margin: 0 16px -10px;
        .count_box__desc {
            font-size: 14px;
            color: #777;
            >span{
                  margin-left: 5px;
            }
        }
    }
    ul{
        position: absolute;
        top: 329px;
        width: 100%;
        overflow: hidden;
        >li{
                    
            width: 100%;
            display: flex;
            justify-content: flex-start;
            .left{
                display: inline-block;
                text-align: center;
                width: 45px;
                line-height: 62px;
                >span{
                    color: #777;
                    font-size: 14px;
                    
                }
            }
            .right{
                display: inline-block;
                position: relative;
                -webkit-box-flex: 1;
                -webkit-box-align: center;
                padding: 10px 16px;
                overflow: hidden;
                >section{
                    -webkit-box-flex: 1;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    >h3{
                        font-size: 16px;
                        color: #000;
                        font-weight: normal;
                    }
                    >p{
                        display: block;
                        overflow: hidden;
                        font-size: 12px;
                        color:#777;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }
            }
            &:nth-of-type(1){
                .left>span{
                     color: #FF400B;
                }
            }
            &:nth-of-type(2){
                .left>span{
                     color: #FF400B;
                }
            }
            &:nth-of-type(3){
                .left>span{
                     color: #FF400B;
                }
            }
        }
    }
}
.act{
    display:-webkit-box!important;
}
